<template>
  <div class="box">
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      活动历史
    </div>
    <!-- 查询 -->
    <div class="consume_input">
      <input type="" @focusout="searchUnFocus" @focus="searchFocus" class="iconfont" :placeholder="icon"/>
    </div>
    <!--  -->
    <div class="centent">
      <!-- 标题卡 -->
      <div>
        <div class="title_card" v-for="(item,index) in dataList" :key="index">
          <div>支出: $200 收入: $13</div>
          <el-date-picker
            v-model="item.time"
            class="title_card_back"
            type="month"
            placeholder="选择月">
          </el-date-picker>
          <!--          <div class="title_card_back">-->
          <!--            <span>2020年10月</span><span class="el-icon-arrow-down"></span>-->
          <!--          </div>-->
        </div>

        <div class="card_back" v-for="item in dataList" :key="item.ROW_NUMBER">
          <div class="card_back_left">
            <img src="../../../../assets/static/Consumption/q1.png" alt="">
            <div>
              <div>{{ item.device_name }}</div>
              <div>{{ item.create_time }}</div>
            </div>
          </div>
          <img src="../../../../assets/static/activitiesHistory/5.png" alt="">
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {history} from '@/api/merbership/activity'

export default {
  data() {
    return {
      icon: '\ue630 搜索',
      dataList: [{time: ''}],
    }
  },
  methods: {
    /**
     * 失去焦点时
     */
    searchUnFocus() {
      this.icon = '\ue630 搜索'
    },
    /**
     * 搜索框获取焦点时
     */
    searchFocus() {
      this.icon = ''
    },
    // ---------------- axios ------------------
    /**
     * 活动历史
     */
    history() {
      const pd = {}
      history(this.$qs.stringify(pd))
        .then(res => {
          this.info = res.data.data.data
        })
    }
  },
  mounted() {
    this.history()
  }
}
</script>

<style scoped>
/* 标题 */
.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-weight: bold;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/*  */
.consume_input {
  margin: 15px;
}

.consume_input input {
  box-shadow: 0 0 5px #ccc;
  width: 98%;
  text-align: center;
  outline: none;
  border: none;
  height: 40px;
  border-radius: 10px;
}

.consume_input input::-webkit-input-placeholder {
  color: #67C41D;
}

/*  */
.centent {
  margin: 15px;
}

/* 标题卡 */
.title_card {
  background-color: rgba(193, 225, 169, 0.5);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #64BE1D;
  border-radius: 10px;
}

.title_card_back {
  background-color: #fff;
  width: 180px;
  /*padding: 8px;*/
  border-radius: 8px;
}

.title_card_back .el-icon-arrow-down {
  margin-left: 3px;
}

/*  */
.card_back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
}

.card_back img {
  width: 57px;
}

.card_back_left img {
  width: 45px;
  margin-right: 10px;
  margin-top: 5px;
}

.card_back_left {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #999999;
  font-weight: normal;
}

.card_back_left > div > div:nth-child(1) {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: bold;
  color: #333333;
}
</style>
